// 整体的页面布局
import { Component } from 'react';
import { Layout } from 'antd';
import styles from './index.less';
import logo from '@/assets/images/logo.svg';

import ProMenu from './component/menu';

const { Header, Sider, Content } = Layout;

export default class BasicLayout extends Component<any, any> {
  state = {
    collapsed: false,
  };

  onCollapse = (collapsed: Boolean) => {
    this.setState({ collapsed });
  };

  render():
    | React.ReactElement<any, string | React.JSXElementConstructor<any>>
    | string
    | number
    | {}
    | React.ReactNodeArray
    | React.ReactPortal
    | boolean
    | null
    | undefined {
    const { collapsed } = this.state;

    return (
      <Layout>
        {/* 侧栏 */}
        <Sider
          collapsible
          collapsed={collapsed}
          onCollapse={this.onCollapse}
          theme="light"
          breakpoint="lg"
          width={208}
          style={{ minHeight: '100vh', color: 'white' }}>
          <div className={styles.logo}>
            <img src={logo} alt="logo" />
          </div>
          <ProMenu />
        </Sider>

        <Layout>
          {/* 头部 */}
          <Header className={styles.layoutsHeader}>
            <div className={styles.proHeader}> header </div>
          </Header>
          {/* 内容区 */}
          <Content>{this.props.children}</Content>
        </Layout>
      </Layout>
    );
  }
}
